<template>
  <div id="index">
    <Meun></Meun>
    <div class="content">
       <smartTable v-bind:get-message="tableData" v-on:receiveData="receiveData">
        <tr v-for="item in Data">
          <td>{{item.title}}</td>
          <td>{{item.class}}</td>
          <td>{{item.tag}}</td>
          <td>{{item.time}}</td>
          <td>{{item.author}}</td>
          <td>
            <button class="btn btn-info btn-xs">查看</button>
            <button class="btn btn-danger btn-xs">删除</button>
          </td>
        </tr>
       </smartTable>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Meun from '../../components/menu.vue'
import smartTable from '../../components/smartTable.vue'
export default {
  data () {
    return {
      msg: this.$route.params.info,
      tableData: {
        'colTitle': ['类型', '账号', '关联次数', '最后上线时间', '最后出现场所', '操作'],
        'method': 'GET',
        'url': '/static/json/test.json',
        'query': { 'a': 1 }
      },
      Data: []
    }
  },
  components: {
    smartTable,
    Meun
  },
   methods: {
    receiveData (data) {
      this.Data = data
    }
  },
  mounted () {
    axios.get('/search',{
        params: {
          searchInfo: this.$route.params.info
        }
    })
    .then((response) => {
        console.log(response)
    })
    .catch((error) => {
        console.log(error)
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#index{
	position: fixed;
	width: 100%;
	height:100%;
}
.content{
    width:80%;
    margin-left:10%;
    margin-top:100px;
    border: 1px solid #c5baba;
    border-radius: 5px;
    padding:50px;
}
</style>

